<template>
<div>
  <div class="tabNav">
   <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b>/<img src="../assets/img/assignment.png" />任务列表</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd table-drop" shadow="hover">
                <div class="search">
                  <el-input v-model="input" placeholder="ID/任务名称"></el-input>
                  <!-- <el-input v-model="input" placeholder="企业名称/统一社会信用代码"></el-input>
                  <el-input v-model="input1" placeholder="ID/任务名称"></el-input> -->
                  <el-select v-model="value" placeholder="全部">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button type="primary" @click="getTableData(false, false, 'createTime')">查询</el-button>
                </div>
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                ref="multipleTable"
                @sort-change="sortChange"
                >
                <el-table-column prop="id" sortable="custom" align="center" label="任务ID" min-width="90"> </el-table-column>
                <el-table-column prop="businessName" sortable="custom" align="center" min-width="100" label="企业名称">
                </el-table-column>
                <el-table-column prop="name" sortable="custom" align="center" min-width="100" label="任务名称">
                </el-table-column>
                <el-table-column prop="taskPayment" sortable="custom" align="center" min-width="100" label="预计服务费">
                </el-table-column>
                <el-table-column prop="needPeopleNum" sortable="custom" align="center" label="发放人数" min-width="100">
                </el-table-column>
                <el-table-column prop="receivedPeopleNum" align="center" label="领取人数" min-width="100">
                </el-table-column>
                <el-table-column prop="releaseDate" sortable="custom" align="center" label="任务开始时间" width="140">
                  <template #default="item">
                    {{ format('yyyy-MM-dd', new Date(item.row.releaseDate)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="endDate" sortable="custom" align="center" label="任务结束时间" width="140">
                  <template #default="item">
                    {{ format('yyyy-MM-dd', new Date(item.row.endDate)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" sortable="custom" align="center" label="任务创建时间" width="140">
                  <template #default="item">
                    {{ format('yyyy-MM-dd', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="taskStatus" align="center" label="状态">
                    <template #default="item">
                     {{ item.row.isDisable == 1 ? '已启用' : '已禁用' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="150"
                    class-name="editor"
                >
                    <template #default="item">
                        <el-button @click="updateTaskStatus(item.row,1)" v-if="item.row.isDisable == 1" type="text">禁用</el-button>
                        <el-button @click="enableTask(item.row,0)" v-else type="text">启用</el-button>|
                        <el-button type="text" @click="getTaskDetails(item.row.id)">详情</el-button>|
                    <router-link :to="{ path: '/taskManageDel', query: { id: item.row.id } }">
                        <el-button type="text">明细</el-button>
                    </router-link>
                    </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
                <el-dialog title="任务详情" v-model="taskDelShow" custom-class="examine-style" width="50%">
                    <div class="modifyPassword">
                         <div class="details-box">
                            <el-divider></el-divider>
                          </div>
                          <div class="taskDel" v-if="Object.keys(taskDetailsObj).length > 0">
                            <strong><em>企业名称</em>{{ taskDetailsObj.businessName }}</strong>
                            <strong><em>任务名称</em>{{ taskDetailsObj.name }}</strong>
                            <strong><em>预估服务费</em>{{ taskDetailsObj.taskPayment }}</strong>
                            <strong><em>发起方式</em>{{ taskDetailsObj.launchMode == 1 ? '所有关注企业的人' : '部分关注企业的人' }}</strong>
                            <strong><em>发放人数</em>{{ taskDetailsObj.needPeopleNum }}</strong>
                            <strong><em>领取人数</em>{{ taskDetailsObj.receivedPeopleNum }}</strong>
                            <strong><em>任务开始时间</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(taskDetailsObj.releaseDate)) }}</strong>
                            <strong><em>任务结束时间</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(taskDetailsObj.endDate)) }}</strong>
                            <strong><em>任务创建时间</em>{{ format('yyyy-MM-dd hh:mm:ss', new Date(taskDetailsObj.updateTime)) }}</strong>
                            <strong><em>任务地址</em>{{ taskDetailsObj.taskAddress }}</strong>
                            <strong><em>任务说明</em><i>{{ taskDetailsObj.taskDescription }}</i></strong>
                          </div>
                    </div>
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="taskDelShow = false">取 消</el-button>
                        <el-button type="primary" @click="taskDelShow = false">确 定</el-button>
                    </span>
                    </template>
                </el-dialog>
            </el-card>
        </el-col>
    </el-row>
</div>  
</template>
<script>
export default {
  props: ['search'],
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      taskStatus: {
        0: "发布中",
        1: "进行中",
        2: "已结束",
      },
      userTaskShow: false,
      taskDelShow: false,
      options: [{
        value: '',
        label: '全部'
      },{
        value: '1',
        label: '已启用'
      }, {
        value: '0',
        label: '已禁用'
      }],
      value: '',
      input1: '',
      input: '',
      tableData: [],
      checkedLsit: [],
      taskDetailsObj: [],
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [] // 选中的数据
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      // 获取列表信息
      this.$http({
        url: "/api/quick/business/task/selectTasks",
        method: "post",
        headers: {
          // "businessId": ' ',
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: this.input,
          isDisable: this.value,
          taskId: this.input1,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.total = data.result.total;
          this.tableData = data.result.list;
        }
      });
    },
    getTaskDetails(id) {
      this.taskDelShow = true
      // 获取任务详情
      this.$http({
        url: "/api/quick/business/task/selectTaskDetail",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          taskId: id
        },
      }).then((data) => {
        if (data.code == 0) {
          // this.total = data.result.total;
          this.taskDetailsObj = data.result
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleSelectionChange() {},
    updateTaskStatus(item) {
      // 禁用
      this.$confirm('是否禁用任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/business/task/disabledTask",
          method: "post",
          headers: {
            "Content-Type": "application/json",
            // "businessId": item.businessId
          },
          data: [item.id],
          // data: {
          //   isDisable: item.id
          // },
        }).then((data) => {
          if (data.code == 0) {
            this.$message({
              message: '已禁用',
              type: 'success',
              offset: 60
            })
            this.getTableData()
          }
        });
      }).catch(() => {
      });
    },
    enableTask(item) {
      // 任务启用
      this.$confirm('是否启用任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-message',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: "/api/quick/business/task/enableTask",
          method: "post",
          headers: {
            "Content-Type": "application/json",
            // "businessId": item.businessId
          },
          data: [item.id],
        }).then((data) => {
          if (data.code == 0) {
            this.$message({
              message: '已启用',
              type: 'success',
              offset: 60
            })
            this.getTableData()
          }
        });
      }).catch(() => {
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == 'businessName' || d.prop == 'name') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableData()
    }
  },
};
</script>
<style scoped>
.el-dialog__body {
  padding-top: 0;
}
.cardTits .el-table .editor .el-button--text {
    margin-left: 0;
}
</style>
